<template>
	<div class="commonCommentOuter">
		<div class="commonComment">
			<div class="textAreaBox">
				<textarea class="commentTextArea hideScrollBar" placeholder="输入评论或@朋友" :maxlength="140"></textarea>
				<div class="inputLengthTips">140</div>
			</div>
			<div class="inputController my-3">
				<div>
					<AtIcon class="me-3 cursor-pointer" width="20" height="20" />
					<HashIcon class="cursor-pointer" width="20" height="20" />
				</div>
				<div class="rounded-pill text-center px-3 py-2 box-border cursor-pointer">评论</div>
			</div>
			<CommentTypeItem :api="strickGetCommentsThrottle" :praiseApi="praiseApi" :showAll="showAll" :commentObj="commentObj">
				<template v-for="item in extendedslot" :key="item[0]">
					<slot :name="item[0]" />
				</template>
			</CommentTypeItem>
		</div>
		<slot name="end" />
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, PropType, computed, watch } from "vue";
import { getEventCommentApi } from "@/api/common";
import { throttle } from "@/utils";
type ApiType = () => Promise<any>;
type PraiseApi = (cid: number, type: 0 | 1) => Promise<any>;
export default defineComponent({
	props: {
		praiseApi: {
			type: Function as PropType<PraiseApi>,
		},
		threadId: {
			type: String,
			default: "",
		},
		showAll: {
			type: Boolean,
			default: false,
		},
		api: {
			type: Function as PropType<ApiType>,
			default: () => {
				return new Promise((resolve, reject) => {
					resolve({});
				});
			},
		},
	},
	setup(props, context) {
		const state = reactive({
			commentObj: {},
			extendedslot: computed(() => Object.entries(context.slots).filter((item) => item[0] !== "end")),
		});
		watch(
			() => state.extendedslot,
			(newV) => {
				// console.log(newV);
			},
			{ immediate: true }
		);

		const getComments = () => {
			// getEventCommentApi(props.threadId)
			(props.api as ApiType)().then((res) => {
				state.commentObj = res;
			});
		};
		let getCommentsThrottle = null;
		let strickGetCommentsThrottle = () => {
			if (!getCommentsThrottle) {
				getCommentsThrottle = throttle(getComments, 200, true);
			}
			getCommentsThrottle();
		};
		watch(
			() => props.api,
			(newV) => {
				strickGetCommentsThrottle();
			},
			{ immediate: true }
		);
		return {
			...toRefs(state),
			strickGetCommentsThrottle,
		};
	},
});
</script>

<style scoped lang="scss">
.commonCommentOuter {
	width: 100%;
	border-radius: 4px;
	.commonComment {
		width: 100%;
		padding: 14px 14px 0;
		.textAreaBox {
			border-radius: 6px;
			position: relative;
			height: 80px;
			background-color: #fff;
			border: 1px solid rgb(212, 212, 212);
			.commentTextArea {
				padding-top: 4px;
				border: none;
				width: calc(100% - 34px);
				height: 74px;
				border-radius: 6px;
				vertical-align: top;
				outline: none;
				text-indent: 6px;
				resize: none;
				font-size: 13px;
				&::placeholder {
					color: rgba($color: #ccc, $alpha: 1);
				}
			}
			.inputLengthTips {
				color: #ccc;
				position: absolute;
				right: 12px;
				bottom: 6px;
			}
		}
		.inputController {
			display: flex;
			justify-content: space-between;
			align-items: center;
			> div:last-child {
				width: 66px;
				border: 1px solid #ccc;
			}
		}
	}
}
</style>
